<template>
  <div class="address-manager">
    <!--<x-header :left-options="{backText: ''}">地址管理
      <div class="overwrite-title-right" slot="right" @click="addAddress">添加地址</div>
    </x-header>-->
    <scroller ref="scroll"
    :on-refresh="refresh"
    :on-infinite="infinite">
      <div class="add-list">
        <div class="add-item" v-for="item in addList">
          <div class="top-info clear">
            <div class="name fl">{{item.name}}</div>
            <div class="phone fl">{{item.phone}}</div>
            <div class="moren fl" v-if="item.type==0">默认</div>
          </div>
          <div class="address">{{item.address}}</div>
          <div class="bottom-bar display-flex">
            <div class="default" @click="setDefault(item)">
              <img src="../../../assets/img/user/chose_1.png" alt="" v-if="item.checked==true">
              <img src="../../../assets/img/user/chose_2.png" alt="" v-else>
              <span>默认</span>
            </div>
            <x-button @click.native="modifyAddress(item)">修改信息</x-button>
          </div>
        </div>
      </div>
    </scroller>

    <!--<x-button @click.native="addAddress()">添加</x-button>-->
  </div>
</template>

<script src="./addressManage.js"></script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .address-manager{
    background-color: #f5f5f5;
    padding-top: 0.2rem;
    .add-list{
      margin-top: 0.2rem;
    }
    .add-item{
      background-color: #fff;
      padding: 0.3rem 0.3rem 0;
      margin-bottom: 0.2rem;
    }
    .top-info{
      >div{
        margin-right: 0.1rem;
      }
      .name{
        color: #222;
        font-size: 0.32rem;
        font-weight: bold;
      }
      .phone{
        color: #222;
        font-size: 0.3rem;
      }
      .moren{
        height: 0.32rem;
        /*line-height: 0.32rem;*/
        color: #FF3C4A;
        font-size: 0.25rem;
        border:1px solid #FF3C4A;
        padding: 0 0.05rem;
        position: relative;
        top:0.05rem;
      }
    }
    .address{
      color: #999;
      font-size: 0.24rem;
      padding: 0.15rem 0;
      border-bottom: 1px solid #EBEBEB;
    }
    .bottom-bar{
      height: 0.8rem;
      /*line-height: 0.8rem;*/
      justify-content: space-between;
      .default{
        padding-top: 0.2rem;
        img{
          width:0.34rem;
          height:0.34rem;
          position: relative;
          top:0.05rem;
        }
      }
      .weui-btn{
        margin: 0;
        padding: 0 0 0 0.35rem;
        width:auto;
        color: #666;
        font-size: 0.26rem;
        border: none;
        background: url("../../../assets/img/user/edit.png") no-repeat 0 center transparent;
        background-size: 0.22rem 0.22rem;
      }
      .weui-btn:after{
        display: none;
      }
    }
  }
</style>
